<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>系统消息</title>
    <!-- Path to Framework7 Library CSS-->
    <link rel="stylesheet" href="../css/framework7.ios.min.css">
    <link rel="stylesheet" href="../css/framework7.ios.colors.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="../css/my-app.css">
    <link rel="stylesheet" href="../css/ekang.css"/>
    <style type="text/css">
        li {
            position: relative;
            margin-top: 10px;
            width: 100%;
            height: 60px;
            border-top: 1px solid #e6e6e6;
            border-bottom: 1px solid #e6e6e6;
            background-color: #fff;
            list-style-type: none;
        }

        li img {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 40px;
            height: 40px;
        }

        li .title {
            position: absolute;
            font-size: 14px;
            color: #333333;
            left: 60px;
            top: 10px;
        }

        li .subTitle {
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            -ms-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;/* Opera */
            position: absolute;
            font-size: 12px;
            color: #999999;
            top: 34px;
            left: 60px;
            width: 70%;
        }

        li .time {
            position: absolute;
            font-size: 12px;
            color: #666666;
            right: 10px;
            top: 10px;
        }

        li .messageNum {
            position: absolute;
            width: 17px;
            height: 17px;
            background-color: #e41212;
            left: 40px;
            top: 5px;
            border-radius: 17px;
            color: #fff;
            font-size: 11px;
            text-align: center;
            line-height: 16px;
            z-index: 100;
        }

    </style>
</head>
<body>

<div class="views tabs toolbar-through">
    <!--导航条-->
    <!-- Second view (for second wrap)-->
    <div id="view" class="view view-main tab active">
        <!-- We can make with view with navigation, let's add Top Navbar-->
        <div class="navbar">
            <div class="navbar-inner" style="background-color: #38a16d">
                <div class="left" id="back">
                    <a href="#" class="back link">
                        <i class="icon icon-back color-white" style="color: white"></i>
                        <span style="color: white">返回</span>
                    </a>
                </div>
                <div class="center sliding" style="color: white">系统消息</div>
            </div>
        </div>

        <div class="pages navbar-through">
            <div data-page="index-2" class="page page-on-center">
                <div class="page-content">
                    <ui>
                        <li id="order_status">
                            <img src="../img/mypage_img/icon_Order.png" alt="icon"/>
                            <!--<div class="messageNum">8</div>-->
                            <span class="title">订单状态</span>
                            <span class="time" id="order_time"></span>
                            <span class="subTitle" id="order_message"></span>
                        </li>
                        <li id="order_notice">
                            <img src="../img/mypage_img/icon_notice.png" alt="icon"/>
                            <div class="messageNum" id="sys_num"></div>
                            <span class="title">系统通知</span>
                            <span class="time" id="sys_time"></span>
                            <span class="subTitle" id="sys_message"></span>
                        </li>
                    </ui>
                </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="../js/framework7.min.js"></script>
<script type="text/javascript" src="../js/my-app.js"></script>
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/ekang.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script>
    $(function () {
        var orderId;
        var message = {
            getMessageContent: function () {
                $.ajax({
                    type: 'GET',
                    url: textUrl + '/user/msglist',
                    data: {         // 需要于客户端同步
                        uid : $.cookie("local_userId")
                    },
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    success: function (result) {
                        if (result.ret == 0) {
                            var order_data = result.data.msg_info;
                            $('#order_message').html(order_data.message);
                            $('#order_time').html(order_data.c_on);
                            orderId = order_data.order_id;

                            var sys_data = result.data.sys_msg_info;
                            $('#sys_message').html(sys_data.message);
                            $('#sys_time').html(order_data.c_on);

                            var sysNum = $('#sys_num');
                            if(sys_data.msg_num == 0) {
                                sysNum.hide();
                            }else{
                                sysNum.show();
                                if(sys_data.msg_num > 9){
                                    sysNum.html("9+");
                                }else{
                                    sysNum.html(sys_data.msg_num);
                                }
                            }

                        } else {
                            alert(result.msg);
                        }
                    }
                });
            },
        };

        $('#order_status').click(function () {
            location.href = "order_status.html?orderId="+orderId;
        });

        $('#order_notice').click(function () {
            location.href = "notice.html";
        });

        $('#back').click(function () {
            history.back();
        });

        message.getMessageContent();
    });
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>
<script src="../js/weixin2.js"></script>
</body>
</html>